<template>
  <div class="requirement-detail">
    <el-descriptions :column="3" border size="small">
      <el-descriptions-item label="迭代版本">
        {{ task.extend?.iterativeVersion || "未设置" }}
      </el-descriptions-item>
      <el-descriptions-item label="前端开发" :span="2">
        <span>{{ task.extend?.frontEndDeveloper?.name || "未分配" }}</span>
        <el-tag
          v-for="(skill, index) in task.extend?.frontEndDeveloper?.expertise"
          :key="index"
          class="skill-tag"
          type="info"
          size="small"
        >
          {{ skill }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="后端开发" :span="3">
        <span>{{ task.extend?.backEndDeveloper?.name || "未分配" }}</span>
        <el-tag
          v-for="(skill, index) in task.extend?.backEndDeveloper?.expertise"
          :key="index"
          class="skill-tag"
          type="info"
          size="small"
        >
          {{ skill }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="需求列表" :span="3">
        <div
          v-if="task.extend?.newDemands && task.extend.newDemands.length > 0"
        >
          <el-table
            :data="task.extend.newDemands"
            style="width: 100%"
            size="small"
            border
          >
            <el-table-column prop="demandName" label="名称" min-width="120" />
            <el-table-column
              prop="demandDescription"
              label="描述"
              min-width="180"
              show-overflow-tooltip
            />
            <el-table-column prop="difficulty" label="难度" width="60">
              <template #default="{ row }">
                <el-tag :type="getDifficultyType(row.difficulty)" size="small">
                  {{ row.difficulty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="expectedTime" label="预计时间" width="80" />
            <el-table-column label="前端开发" width="100">
              <template #default="scope">
                <div>
                  <div>{{ scope.row.frontEndDeveloper || "-" }}</div>
                  <div
                    v-if="scope.row.frontEndDeveloperInfo?.expertise?.length"
                  >
                    <el-tag
                      v-for="(skill, index) in scope.row.frontEndDeveloperInfo
                        .expertise"
                      :key="index"
                      size="small"
                      type="success"
                      style="margin: 2px"
                    >
                      {{ skill }}
                    </el-tag>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="后端开发" width="100">
              <template #default="scope">
                <div>
                  <div>{{ scope.row.backEndDeveloper || "-" }}</div>
                  <div v-if="scope.row.backEndDeveloperInfo?.expertise?.length">
                    <el-tag
                      v-for="(skill, index) in scope.row.backEndDeveloperInfo
                        .expertise"
                      :key="index"
                      size="small"
                      type="info"
                      style="margin: 2px"
                    >
                      {{ skill }}
                    </el-tag>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="时间范围" min-width="180">
              <template #default="{ row }">
                {{ row.startTime || "未设置" }} 至 {{ row.endTime || "未设置" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-empty v-else description="暂无需求数据" />
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  task: {
    type: Object,
    required: true,
  },
});

// 获取难度对应的标签类型
const getDifficultyType = (difficulty) => {
  switch (difficulty) {
    case "简单":
      return "success";
    case "中等":
      return "warning";
    case "复杂":
      return "danger";
    default:
      return "info";
  }
};
</script>

<style scoped lang="scss">
.requirement-detail {
  padding: 10px;

  .skill-tag {
    margin-left: 5px;
  }

  :deep(.el-descriptions__cell) {
    padding: 8px 12px;
  }
}
</style>
